<template>
  <div id="credit-loan">
    <div class="history-tab">
          <button-tab v-model="switchTab">
            <button-tab-item @on-item-click="loanType">贷款</button-tab-item>
            <button-tab-item @on-item-click="creditType">信用卡</button-tab-item>
          </button-tab>
        </div>
        <div class="btton_tab_history"></div>
        <load-more :show-loading="false" :tip="'暂无数据'" v-if="lengthshow" background-color="#fbf9fe"></load-more>
        <share-float :shareshow="shareshow" :friends="friends" v-on:sharefriends="hideshare"></share-float>
        <scroller v-show="listShow" lock-x scrollbar-y use-pullup  @on-pullup-loading="loadMore"  v-model="status" ref="scroller">
          <div class="box2">
            <div class="product-list loan_product"  v-for="(loan, index) in loanlist"  :key="index">
              <loan-message :loandesc="loandesc" :loan="loan" :partnerType="partnerType"></loan-message>
              <loanqrcode-btton v-on:contentFloat="contentFloat" :item="loan" :index="index"></loanqrcode-btton>
            </div>
            <add :addposition="1"></add>
          </div>
          <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
            <span v-show="status.pullupStatus === 'default'"></span>
            <span class="pullup-arrow" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
            <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
          </div>
        </scroller>
        <scroller v-show="!listShow" lock-x scrollbar-y use-pullup  @on-pullup-loading="loadMore"  v-model="status" ref="scroller">
          <div class="box2">
            <div class="product-list"  v-for="(loan, index) in creditlist" :key="index">
                <loan-message :loandesc="loandesc" :loan="loan" :partnerType="partnerType"></loan-message>
                <loanqrcode-btton v-on:contentFloat="contentFloat" :item="loan" :index="index"></loanqrcode-btton>
            </div>
            <add :addposition="1"></add>
          </div>
          <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
            <span v-show="status.pullupStatus === 'default'"></span>
            <span class="pullup-arrow" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
            <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
          </div>
        </scroller>
    </div>
</template>
<script>
import ShareFloat from '../comment/ShareFloat'
import LoanMessage from '../comment/LoanMessage'
import LoanqrcodeBtton from '../comment/LoanqrcodeBtton'
import Add from '../comment/Add'
import { LoadMore, Scroller, Spinner, ButtonTab, ButtonTabItem } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  data () {
    return {
      loandesc: true,
      loanlist: [],
      creditlist: [],
      listShow: true,
      shareshow: false,
      friends: false,
      lengthshow: false,
      switchTab: 0, // 切换贷款，信用卡
      PageNum: 100, // 记录每页数
      partnerType: '1',// 信贷1，保险2 信用卡3参数
      count: 1,
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
    }
  },
  components: {
    ShareFloat,
    Add,
    LoadMore,
    Scroller,
    LoanMessage,
    Spinner,
    ButtonTab,
    ButtonTabItem,
    LoanqrcodeBtton
  },
  created () {
    window.document.title = '我要赚钱'
    var params = {
        page: 1,
        perPage: '',
        partnerType: '1'
      }
      api.creditloan(params).then(res => {
        console.log(res)
        if (res.status === 200) {
          this.loanlist = res.data.list
          if (this.loanlist.length === 0) {
            this.lengthshow = true
          } else {
            this.lengthshow = false
          }
        }
      })
      var paramsed = {
        page: 1,
        perPage: '',
        partnerType: '3'
      }
      api.creditloan(paramsed).then(res => {
        console.log(res)
        if (res.status === 200) {
          this.creditlist = res.data.list
          if (this.creditlist.length === 0) {
            this.lengthshow = true
          } else {
            this.lengthshow = false
          }
        }
      })
      if (this.$store.state.credit_type === '3') {
        this.listShow = false
        this.switchTab = 1
        this.partnerType = '3'
        this.$store.commit('creditShare','1')
      } else {
        this.listShow = true
        this.switchTab = 0
        this.partnerType = '1'
        this.$store.commit('resetShare','')
      }
      utils.jssdkwx(api, this.$wechat, this.$store)
  },
  methods: {
    loadMore () {
      this.count ++
      this.PageNum = 10 * this.count + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.loadmore(this.PageNum)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    loadmore (index) {
      if (this.listShow === true) {
        var params = {
          page: 1,
          perPage: index,
          partnerType: '1'
        }
        api.creditloan(params).then(res => {
          console.log(res)
          if (res.status === 200) {
            this.loanlist = res.data.list
            if (this.loanlist.length === 0) {
              this.lengthshow = true
            } else {
              this.lengthshow = false
            }
          }
        })
      } else if (this.listShow === false) {
        var params = {
          page: 1,
          perPage: index,
          partnerType: '3'
        }
        api.creditloan(params).then(res => {
          console.log(res)
          if (res.status === 200) {
            this.creditlist = res.data.list
            if (this.creditlist.length === 0) {
              this.lengthshow = true
            } else {
              this.lengthshow = false
            }
          }
        })
      }
    },
    loanType (index) {
      this.shareshow = false
      this.listShow = true
      this.partnerType = '1'
      this.$store.commit('resetShare','')
      utils.jssdkwx(api, this.$wechat, this.$store)
    },
    creditType (index) {
      this.shareshow = false
      this.partnerType = '3'
      this.listShow = false
      this.$store.commit('creditShare','1')
      utils.jssdkwx(api, this.$wechat, this.$store)
    },
    contentFloat () {
      this.shareshow = true
    },
    hideshare () {
      this.shareshow = false
    }
  }
}
</script>

